<template>
    <div class="menu-table-container">
        <el-card shadow="never" class="table-container">
            <template #header>
                <el-button
                    v-hasPerm="['sys:menu:add']"
                    type="success"
                    @click="openDialog(0)"
                >
                    <template #icon
                        ><ElSvgIcon a-icon-name="el-icon-plus" :aSize="15"
                    /></template>
                    新增</el-button
                >
            </template>

            <el-table
                v-loading="loadingRef"
                :data="menuList"
                highlight-current-row
                row-key="id"
                :expand-row-keys="['1']"
                @row-click="onRowClick"
                :tree-props="{
                    children: 'children',
                    hasChildren: 'hasChildren',
                }"
            >
                <el-table-column label="菜单名称" min-width="200">
                    <template #default="scope">
                        
                        <ElSvgIcon
                                    color="var(--el-text-color-regular)"
                                    :a-icon-name="scope.row.icon"
                                />
                        {{ scope.row.name }}
                    </template>
                </el-table-column>

                <el-table-column label="类型" align="center" width="80">
                    <template #default="scope">
                        <el-tag
                            v-if="scope.row.type === MenuTypeEnum.CATALOG"
                            type="warning"
                            >目录</el-tag
                        >
                        <el-tag
                            v-if="scope.row.type === MenuTypeEnum.MENU"
                            type="success"
                            >菜单</el-tag
                        >
                        <el-tag
                            v-if="scope.row.type === MenuTypeEnum.BUTTON"
                            type="danger"
                            >按钮</el-tag
                        >
                        <el-tag
                            v-if="scope.row.type === MenuTypeEnum.EXTLINK"
                            type="info"
                            >外链</el-tag
                        >
                    </template>
                </el-table-column>

                <el-table-column
                    label="路由路径"
                    align="left"
                    width="150"
                    prop="path"
                />

                <el-table-column
                    label="组件路径"
                    align="left"
                    width="250"
                    prop="component"
                />

                <el-table-column
                    label="权限标识"
                    align="center"
                    width="200"
                    prop="perm"
                />

                <el-table-column label="状态" align="center" width="80">
                    <template #default="scope">
                        <el-tag v-if="scope.row.visible === 1" type="success"
                            >显示</el-tag
                        >
                        <el-tag v-else type="info">隐藏</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    label="排序"
                    align="center"
                    width="80"
                    prop="sort"
                />

                <el-table-column
                    fixed="right"
                    align="center"
                    label="操作"
                    width="220"
                >
                    <template #default="scope">
                        <el-button
                            v-if="
                                scope.row.type == 'CATALOG' ||
                                scope.row.type == 'MENU'
                            "
                            v-hasPerm="['sys:menu:add']"
                            type="primary"
                            link
                            size="small"
                            @click.stop="openDialog(scope.row.id)"
                        >
                            <el-icon-plus style="width: 1em; height: 1em; margin-right: 3px"/>新增
                        </el-button>

                        <el-button
                            v-hasPerm="['sys:menu:edit']"
                            type="primary"
                            link
                            size="small"
                            @click.stop="openDialog(undefined, scope.row.id)"
                        >
                            <el-icon-edit style="width: 1em; height: 1em; margin-right: 3px"/>编辑
                        </el-button>
                        <el-button
                            v-hasPerm="['sys:menu:delete']"
                            type="primary"
                            link
                            size="small"
                            @click.stop="handleDelete(scope.row.id)"
                            ><el-icon-delete style="width: 1em; height: 1em; margin-right: 3px" />
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
    <MenuAddEditDialog ref="menuAddEditDialogRef"></MenuAddEditDialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
    TypeMenuQueryI,
    TypeMenuFormI,
    TypeMenuVoI,
} from "@/api/menu/menu_types";
import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
import * as menuApi from "@/api/menu/menu_api_index";
import { $bus } from "@/event_bus/event_bus_index";
import { ElMessage, ElMessageBox } from "element-plus";
import ElSvgIcon from "@/components/el-svg-icon/el_svg_icon_index.vue";
import MenuAddEditDialog from './menu_add_edit_dialog.vue'
import { NslUtil4Vue } from "@/utils/NslUtil4Vue";
////#region defineXxx
//defineOptions({
//name:
//});

//const props=defineProps({
//propA:{
//type:String,
//required:true
//},
//propB:{
//type:Number,
//default:1
//},
//propC:{
//type:String as PropType<MyType>,
//required:true
//},
//});

//const emit = defineEmits<{
//event1:[para1:number,para2:string],
//event2:[para1:number,para2:string],
//}>();
////#endregion

const loadingRef = ref(false);

const menuList = ref<TypeMenuVoI[]>([]);

const queryParamsModel = defineModel<TypeMenuQueryI>({
    required: true,
});

// 选择表格的行菜单ID
const selectedRowMenuId = ref<number | undefined>();

const menuAddEditDialogRef=NslUtil4Vue.componentRef(MenuAddEditDialog);

/**
 * 查询
 */
function handleQuery() {
    // 重置父组件
    loadingRef.value = true;
    menuApi
        .listMenus(queryParamsModel.value)
        .then(({ data }) => {
            menuList.value = data;
        })
        .then(() => {
            loadingRef.value = false;
        });
}

$bus.on("menu-table-query", () => {
    handleQuery();
});

$bus.on("menu-reset-and-query", () => {
    queryParamsModel.value.keywords = undefined;
    handleQuery();
});

/**
 * 打开表单弹窗
 *
 * @param parentId 父菜单ID
 * @param menuId 菜单ID
 */
function openDialog(parentId?: number, menuId?: number) {
    menuAddEditDialogRef.value?.openDialog(parentId,menuId)
}

/** 删除菜单 */
function handleDelete(menuId: number) {
    if (!menuId) {
        ElMessage.warning("请勾选删除项");
        return false;
    }

    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            menuApi.deleteMenu(menuId).then(() => {
                ElMessage.success("删除成功");
                handleQuery();
            });
        })
        .catch(() => ElMessage.info("已取消删除"));
}

/**行点击事件 */
function onRowClick(row: TypeMenuVoI) {
    selectedRowMenuId.value = row.id;
}

onMounted(() => {
    handleQuery();
});
</script>
<style lang="scss" scoped></style>
